<template>
    <div class = "Slideshow" v-loading="loading">
         <el-container>
            <el-container>
            <el-main>
            <el-card class="box-card">
              <div class = "title-wrapper">
             <el-button style="float:right" @click = "newly">新增</el-button>
             <el-select style="float:left;" v-model="value" placeholder="请选择区域">
                  <el-option
                    v-for="item in options"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                    @click.native="area(item.value)"
                   >
                  </el-option>
                </el-select>
              </div>
              <div class = "area">
              </div>
            <div class = "baseList-wrapper">
      <el-table
        :data="tableData"
        style="width: 100%"
        >
            <el-table-column
            label="编号"
            prop="id"
            width="150"
            align="center">
            </el-table-column>
            <el-table-column
            label="名称"
            prop="title"
            align="center"
            >
            </el-table-column>
            <el-table-column
            label="权重"
            width="80"
            prop="weight"
            align="center"
            >
            </el-table-column>
            <el-table-column
            label="创建时间"
            prop="createdAt"
            align="center"
            >
            </el-table-column>
            <el-table-column label="操作" align="center" >
            <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
               
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
            </el-table-column>
          </el-table>
          <div class = "pagination" style="margin:15px 0;float:right">
          </div>
            </div>
               </el-card>
            </el-main>
            </el-container>
            </el-container>
    </div>
</template>
<script>
import transitionTime from '../../transitionTime.js'
export default {
    data(){
        return{
           tableData:[],
           fileList:[],
        // 地区选择
        options: [{
          value: 'home',
          label: '首页',
        }, {
          value: 'base_type',
          label: '基地列表'
        }],
        value:'home',
        // 列表数据
        tableData: [],
        // 项目数据
         Data: [{
            name: '红色根据地',
            address: '进行实地讲解'
          }, {
            name: '红色根据地',
            address: '进行实地讲解'
          }, {
            name: '红色根据地',
            address: '进行实地讲解'
          }, {
            name: '红色根据地',
            address: '进行实地讲解'
          }],
          // loading
          loading:false,
          // 搜索
          Boole:null,
          position:'home'
        }
    },
    created() {
      this.List()
    },
    methods:{
      //删除基地
      handleDelete(index,item){
          this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                // this.loading = true
                this.$api.slideshow.slideshowdelete(item.id).then(res => {
                    if(res.code === 200){
                     this.tableData = this.tableData.filter(data => data.id !== item.id)
                     this.loading = false
                     this.$message({
                     type: 'success',
                     message: '删除成功!'
                    });     
                }
                })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
      },
      //转换日期
      transitionTime(){
        for(let i = 0; i<this.tableData.length; i++){
          this.tableData[i].createdAt = transitionTime(this.tableData[i].createdAt)
        }
      },
      // 选择区域
      area(item){
        this.loading = true
        this.position = item
        this.$api.slideshow.slideshowList(item).then(res => {
          this.tableData = res.data
          this.transitionTime()
          this.loading = false
        }).catch(err => {
          console.log(err)
        })
      },
      //获取默认基地列表
      List(){
        this.loading = true
        if(this.$route.query.Basetype){
          this.value = this.$route.query.Basetype
        }
        console.log(this.$route.query.Basetype)
        this.$api.slideshow.slideshowList(this.value).then(res => {
          this.tableData = res.data
          this.transitionTime()
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      // 新增
      newly(){
        if(this.value == 'base_type'){
          this.$router.push({path:'/Slideshowone?value=base_type',query:{position:this.position}})
        } else {
          this.$router.push({path:'/Slideshowone?value=home',query:{position:this.position}})
        }
      },
      //修改
      //基地编辑
      handleEdit(index,item){
        if(this.value == 'base_type'){
        this.$router.push({path:'Slideshowone?value=base_type',query:{form:item}})
        } else {
        this.$router.push({path:'Slideshowone?value=home',query:{form:item}})
        }
      },
      // 分页
    },
}
</script>
<style scoped>
    .addbase{
        width: 100%;
        height: 100%;
    }
    .addbase .box-card .title-wrapper{
    }
    .addbase .box-card .area{
      float: right;
    }
    .addbase .demo-table-expand {
    font-size: 0;
  }
    .addbase .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
    .addbase .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

